<template>
  <div
    class="demo-collapse"
    :style="properties.style"
  >
    <div>当前值：{{ text }}</div>
    <div class="demo-operator">
      <ElInput
        v-model="increaseFactor"
        type="text"
        @keydown.stop
      />
      <ElButton
        @mousedown.stop
        @click="$emit('btnClick', increaseFactor)"
      >
        增加
      </ElButton>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    properties: {
      type: Object,
      default: () => ({
        t: 1,
        style: {},
      }),
    },
    text: String,
  },
  emits: ['btnClick'],
  data () {
    return {
      showTitle: '',
      increaseFactor: 0,
    }
  },
  watch: {
    'properties.t': {
      handler (val) {
        this.increaseFactor = val
      },
      immediate: true,
    },
  },
  mounted () {
    console.log(this)
  },
}
</script>

<style scoped>
.demo-collapse {
  box-sizing: border-box;
  border: 1px solid #444;
  block-size: 100px;
  inline-size: 300px;
}

.demo-operator {
  display: flex;
}
</style>
